<template>
  <div class="box">
    <div class="content_top">
      <img src="../assets/pic_logo_shouye.png" alt="" style="width:240px"/>
      <h6>统一管理平台</h6>
    </div>
    <div class="content_host">
      <h6>用户登录</h6>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="手机号"
          prop="usermobile"
          label-width="100px"
          style="color: #ffffff; margin: 20px"
        >
          <el-input v-model="ruleForm.usermobile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="userpwd"
          label-width="100px"
          style="color: #ffffff; margin: 20px"
        >
          <el-input
            type="password"
            v-model="ruleForm.userpwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>
     
        <el-form-item>
          <el-button 
           type="primary" size="medium"
           style="width:120px;margin-left:20px"
           @click="submitForm"
           >登录
          </el-button>

          <el-button 
           size="medium"
           type="success"
           style="width:120px;margin-left:20px"
        
           >重置
           <!-- @click="resetForm" -->
          </el-button>
      </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
// import axios from "axios";
import http from "../api/http";
import router from "@/router";
export default {
  name: "LogOn",
  data() {
    return {
      ruleForm: {
        usermobile: "",
        userpwd: "",
      },
      rules: {
        usermobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        userpwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "密码长度在 6 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "拼命加载中...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          setTimeout(() => {
            loading.close();
          }, 1500);
          this.login();
        } else {
          console.log("表单验证失败");
          return false;
        }
      });
    },
    // 登录的接口
    login() {
      http
        .get("/user/login", {
          params: {
            mobile: this.ruleForm.usermobile,
            pwd: this.ruleForm.userpwd,
          },
        })
        .then((response) => {
          console.log(response);
          this.$message({
            message: response.data.msg,
            type: "success",
          });
          
          if(response?.code == 0){
            const token = response.data.token;
            const account = response.data.user_account;

            localStorage.setItem("token", token);
            localStorage.setItem("token_is_exp", 0);

            localStorage.setItem("account", account);

            if (token) {
            router
              .push("/backmanage/BackendHome")
              .then(() => {
                this.$message({
                  message: "您当前登录还未过期，想要登录其他账号请点击退出！",
                  type: "warning",
                });
              })
              .catch((error) => {
                console.log(error);
              });
            }
            console.log(token);
          }
        })
        // .catch((error) => {
        //   this.$message({
        //     message: "请检查网络连接是否正常！！222",
        //     type: "error",
        //   });
        //   console.log("登录报错了：", error);
        // });
    },
    token_search() {
      let token =
        localStorage.getItem("token") &&
        localStorage.getItem("token_is_exp") != 1;
      if (token) {
        router
          .push("/backmanage/BackendHome")
          .then(() => {
            this.$message({
              message: "您当前登录还未过期，想要登录其他账号请点击退出！",
              type: "warning",
            });
          })
          .catch((error) => {
            console.log(error);
          });
      } else {
        router.push("/login");
      }
    },
  },
  created() {
    this.token_search();
  },
};
</script>
<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}
/deep/.demo-ruleForm label {
  color: #ffffff;
}
.box {
  background: url("../assets/background-1.jpg");
  width: 100%;
  height: 100vh;

  .content_top {
    display: flex;
    justify-content: space-between;

    img {
      margin-top: 40px;
      margin-left: 40px;
    }

    h6 {
      margin-top: 40px;
      margin-right: 40px;
      font-family: SourceHanSerifsc Bold;
      font-size: 24px;
      color: #ffffff;
    }
  }

  .content_host {
    width: 450px;
    margin: 200px auto 0 auto;

    h6 {
      font-size: 24px;
      color: #ffffff;
      font-family: SourceHanSerifsc Bold;
      text-align: center;
      margin: 20px 0;
    }

    p {
      display: flex;
      justify-content: space-between;
      margin: 20px 0;

      span {
        font-size: 24px;
        color: #ffffff;
        font-family: SourceHanSerifsc Bold;
      }

      input {
        background-color: #ffffff;
        width: 338px;
        height: 40px;
        border-radius: 10px;
      }
    }

    button {
      width: 450px;
      background-color: #007dfe;
      color: #ffffff;
      height: 40px;
      border-radius: 10px;
      font-size: 18px;
      // line-height: 40px;
      margin: 20px 0;
    }
  }
}
</style>